<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">{{$t('back')}}</block>
			<block slot="content"><text class="text-black text-bold">{{$t('rule').title}}</text></block>
		</cu-custom>
		<view v-if="attshifts!=null" class="sign-title margin-top">
			<view class="sign-title-l">
				<image class="portrait" mode="aspectFill" :src="$constant.IMG_VERSION == $constant.OSS?attshifts.personphoto:$constant.BASEURL+attshifts.personphoto" />
				<view class="text">
					<view class="name">
						{{attshifts.personname}}
					</view>
					<view class="gz">
						{{$t('rule').group}}: {{attshifts.sname}}
					</view>
				</view>
			</view>
		</view>

		<view class="bg-white margin-top" v-if="attshifts!=null" :open=" index == 0 ? true : false " :title="item.title" :show-animation="true" v-for="(item,index) in attshifts.collData"
		 :key="index">
			<view style="padding: 30upx 20upx;" v-for="(item2,index2) in item.content1" :key="index2">
				<view class="con-t">
					{{item2.title}}
				</view>
				<view class="con-c" v-html="item2.content">
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				attshifts:null,
				collData: [
				]
			}
		},
		onLoad() {
			let pages = getCurrentPages()
			let prePage = pages[pages.length - 2]
			let data = prePage.attendanceDetail
			console.log(data)
			//考勤规则数据
			let attshifts={
				personname:data.facewhitelist.personname,
				personphoto:data.facewhitelist.personphoto,
				sname:data.facewhitelist.attshits.sname,
				collData: [{
						id: 0,
						title: this.$t('rule').attTime,
						content1: [{
								title: this.$t('rule').onDutyTime,
								content: data.facewhitelist.attshits.schedulinginfo
							},
							{
								title: this.$t('rule').late,
								content: `${this.$t('rule').allShifts} <br/> ${this.$t('rule').whatLate} <br/> `
							},
						],
					}
					
				]
			}
			this.attshifts = attshifts
		},
		methods: {

		}
	}
</script>

<style>
	.sign-title {
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 30upx 24upx;
		align-items: center;
		/* border-bottom: 1upx solid #333; */
	}

	.sign-title .portrait {
		width: 100upx;
		height: 100upx;
		line-height: 100upx;
		border-radius: 50%;
		background-color: #007AFF;
		color: #fff;
		font-size: 28upx;
		text-align: center;
	}

	.sign-title .sign-title-l {
		display: flex;
	}

	.sign-title .sign-title-l .text {
		margin-left: 20upx;
	}

	.sign-title .sign-title-l .text .name {
		font-size: 32upx;
	}

	.sign-title .sign-title-l .text .gz {
		color: #111;
	}

	.con-t {
		font-weight: bold;
		color: #000;
	}

	.con-c {
		color: #555;
	}
</style>
